<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="申请" width="50%" append-to-body>
      <el-form ref="form" :model="formData" :rules="rules" label-width="80">
        <el-row>
          <el-col :span="24">
            <el-form-item label="费用" prop="fee">
              <el-input v-model="formData.fee"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="维修内容" prop="content">
              <el-input type="textarea" v-model="formData.content" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="sub">提交</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>

      </div>
    </el-dialog>

  </div>
</template>

<script setup>

import api from "./api.js";

const emit = defineEmits(['sub']);

const form = ref();

const formDataInit = {
  id: null,
  applyId: null,
  fee: null,
  content: null,
}

// 表单规则
const rules = {
  fee: {
    required: true,
    message: '不能为空',
    trigger: 'blur',
  },
  content: {
    required: true,
    message: '不能为空',
    trigger: 'blur',
  }
}

const openFlag = ref(false);
const formData = reactive(formDataInit)

function reset() {
  Object.assign(formData, formDataInit);
}

function open(row) {
  openFlag.value = true;
  reset();
  formData.applyId = row.id;
}

function close() {
  openFlag.value = false;
}

function sub() {
  form.value.validate(valid => {
    if (!valid) {
      return;
    }
    api.subRepair({...formData}).then(response => {
      emit("sub");
      close();
    });
  });
}

defineExpose({
  open
})


</script>

